<template>
    <section>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="real_name" placeholder="用户" clearable class="handle-input mr10"></el-input>
                <el-input v-model="id_card_no" placeholder="身份证" clearable class="handle-input w200 mr10"></el-input>
                <el-input v-model="card_number" placeholder="卡号" clearable class="handle-input w200 mr10"></el-input>
                <el-date-picker
                            v-model="timeRange"
                            type="datetimerange"
                            :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            class="mr10"
                    >
                    </el-date-picker>
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
                <el-button type="primary" icon="el-icon-download" @click="search">导出</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" v-loading="loading">
                <el-table-column prop="name" label="品牌" width="60">
                </el-table-column>
                <el-table-column prop="remark" label="通道" width="80">
                </el-table-column>
                <el-table-column prop="transaction_number" label="交易号">
                </el-table-column>
                <el-table-column prop="real_name" label="用户" width="80">
                </el-table-column>
                <el-table-column prop="id_card_no" label="身份证">
                </el-table-column>
                <el-table-column prop="reserve_phone" label="预留手机号" width="120">
                </el-table-column>
                <el-table-column prop="bank_name" label="银行" width="120">
                </el-table-column>
                <el-table-column prop="card_number" label="卡号">
                </el-table-column>
                <el-table-column prop="amount" label="金额" width="80">
                </el-table-column>
                <el-table-column prop="type" label="类型" :formatter="typeFormat" width="60">
                </el-table-column>
                <el-table-column prop="update_time" label="交易时间">
                </el-table-column>
                <el-table-column prop="status" label="状态" :formatter="statusFormat" width="80">
                </el-table-column>
                <el-table-column prop="status_msg" label="状态信息">
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background
                               @current-change="handleCurrentChange"
                               @size-change="handleSizeChange"
                               layout="sizes, prev, pager, next"
                               :total="pagination.total"
                               :current-page.sync="pagination.currentPage"
                               :page-size="pagination.pageSize"
                               :page-sizes="pagination.pageSizes"
                >
                </el-pagination>
            </div>
        </div>
    </section>
</template>

<script>
    import { getOrderList } from '@/api/modules/order'
    import moment from 'moment'

    export default {
        name: "user",
        components: {
        },
        data() {
            return {
                loading: true,
                tableData: [],
                real_name:'',
                id_card_no:'',
                card_number:'',
                timeRange: [],
                pagination:{
                    'total': 0,
                    'pageSize': 20,
                    'currentPage': 1,
                    'pageSizes': [10, 20, 30]
                },
                idx: -1,
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            }
        },
        computed: {
            startTime: function(){
                console.log(this.timeRange)
                return this.timeRange?this.timeRange[0]:null
            },
            endTime: function(){
                return this.timeRange?this.timeRange[1]:null
            }
        },
        created(){
            this.getData();
        },
        methods: {
            search() {
                this.getData()
            },
            // 分页导航
            handleCurrentChange(val) {
                this.pagination.currentPage= val;
                this.getData();
            },
            handleSizeChange(val){
                this.pagination.pageSize= val;
                this.getData();
            },
            // 分页，不需要后台传总数
            resetTotalSize(){
                let size = this.pagination.pageSize * this.pagination.currentPage;
                let tableLen = this.tableData.length;
                if(tableLen == 0){
                    this.pagination.total = size
                }else if(tableLen > 0 && tableLen < this.pagination.pageSize){
                    this.pagination.total = size - 1;
                }else{
                    this.pagination.total = size + 1;
                }
            },
            // 获取数据
            getData() {
                this.loading = true
                getOrderList({
                    real_name:this.real_name,
                    id_card_no:this.id_card_no,
                    card_number:this.card_number,
                    pageSize: this.pagination.pageSize,
                    page: this.pagination.currentPage,
                    startTime: this.startTime,
                    endTime: this.endTime
                }).then(res => {
                    this.loading = false
                    this.tableData = res.data.list
                    this.pagination.total = res.data.pageData.count
                })
            },
            dateFormatter(row, column) {
                return moment(row.create_time*1000).format('YYYY-MM-DD')
            },
            statusFormat(row, column){
                if(row.status === 0){
                    return <el-tag>未执行</el-tag>
                }else if(row.status === 1){
                    return <el-tag type="warning">执行中</el-tag>
                }else if(row.status === 2){
                    return <el-tag type="success">成功</el-tag>
                }else if(row.status === 3){
                    return <el-tag type="danger">失败</el-tag>
                }
            },
            typeFormat(row, column){
                if(row.type === 1){
                    return <span style="color:#F56C6C">消费</span>
                }else if(row.type === 2){
                    return <span style="color:#67C23A">还款</span>
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 100px;
        display: inline-block;
    }
    .w200{
        width: 200px;
    }

    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
</style>